import QtQuick 2.0

Rectangle {
    id: magicRootID;
    width: 200;
    height: 34;
    color: magicAreaID.containsMouse ? "#E6E7EA" : "#F5F5F7";

    property var magicText: "";
    property var magicImage: "";
    property var leftSpace: 10;
    property var spacing: 10;

    MouseArea {
        id: magicAreaID;
        anchors.fill: parent;
        hoverEnabled: true;
        onClicked: {

        }
    }

    Row {
        height: 30;
        anchors.verticalCenter: parent.verticalCenter;
        anchors.left: parent.left;
        anchors.leftMargin: magicRootID.leftSpace;
        spacing: magicRootID.spacing;

        Image {
            id: magicImageID;
            width: 20;
            height: 20;
            anchors.verticalCenter: parent.verticalCenter;
            source: magicRootID.magicImage;
            opacity:magicAreaID.containsMouse ? 1.0 : 0.7;
        }

        Text {
            id: magicTextID
            anchors.verticalCenter: parent.verticalCenter;
            opacity: magicAreaID.containsMouse ? 1.0 : 0.7;
            text: magicRootID.magicText
        }
    }
}
